<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- build:css -->
    <link rel="stylesheet" href="/static/lib/kitadmin/css/layui.css" th:href="@{/lib/kitadmin/css/layui.css}">
    <link rel="stylesheet" href="/static/lib/kitadmin/css/theme/default.css" th:href="@{/lib/kitadmin/css/theme/default.css}" id="theme">
    <link rel="stylesheet" href="/static/lib/kitadmin/css/nprogress.css" th:href="@{/lib/kitadmin/css/nprogress.css}">
    <!-- endbuild -->
    <style>
        .eleTree{
            width: 350px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: inline-block;
            position: absolute;
        }
        .deptName{
            height: auto;
            width: 100%;
            display: none;
            position: absolute;
            top:100%;
            background-color: #fff;
            z-index: 100;
        }
    </style>
</head>
<body>
<div class="container">
    <form class="layui-form" id="form-user-add" lay-filter="form-user">
        <div class="layui-form-item">
        <label class="layui-form-label">登录名称：</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" name="loginName" lay-verify="username" />
        </div>
    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称：</label>
            <div class="layui-input-block">
                <input name="deptId"  type="hidden" />
                <input class="layui-input" type="text" name="deptName" lay-verify="required" readonly autocomplete="off" />
                <div class="eleTree deptName" lay-filter="deptNameTree"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="userName" id="userName" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="password" name="password" id="password" lay-verify="pass" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="email" id="email" lay-verify="email" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机：</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="phonenumber" id="phonenumber" lay-verify="phone" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block">
                <select id="sex" lay-verify="required" lay-filter="sex" th:with="type=${@dict.getType('sys_user_sex')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <div class="onoffswitch">
                    <input type="checkbox" th:checked="true" id="status" name="status" lay-skin="switch">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">岗位：</label>
            <div class="layui-input-block">
                <th:block th:each="post,inte:${posts}" class="check-box">
                    <input th:name="'post['+${inte.index}+']'" type="checkbox" lay-skin="primary"  th:value="${post.postId}" th:title="${post.postName}">
                </th:block>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色：</label>
            <div class="layui-input-block">
                <th:block th:each="role,inte:${roles}" class="check-box">
                    <input th:name="'role['+${inte.index}+']'" type="checkbox" lay-skin="primary"  th:value="${role.roleId}" th:title="${role.roleName}" />
                </th:block>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="btn-add">创建用户</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]]; </script>

<script src="../static/lib/kitadmin/polyfill.min.js" th:src="@{/lib/kitadmin/polyfill.min.js}"></script>
<script src="../static/lib/kitadmin/layui.js" th:src="@{/lib/kitadmin/layui.js}"></script>
<script src="../static/lib/kitadmin/kitadmin.js" th:src="@{/lib/kitadmin/kitadmin.js}"></script>
<script type="text/javascript">
    var el5;
    layui.config({
        base: ctx + 'js/'
    }).use(['element','layer','form','eleTree','common','jquery'],function(){
        var $ = layui.$
            ,element = layui.element
            ,layer = layui.layer
            ,form = layui.form
            ,eleTree = layui.eleTree
            ,common = layui.common;

        form.verify({
            pass: [
                /^[\S]{2,25}$/
                ,'密码必须2到25位，且不能出现空格'
            ],
            username:function(value,item){
                var msg;
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    msg = '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    msg = '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    msg = '用户名不能全为数字';
                }
                $.ajax({
                    type: "POST",
                    url: ctx + "system/user/checkLoginNameUnique",
                    async:false,
                    cache:false,
                    dataType: "json",
                    data: {
                        loginName:$("[name='loginName']").val()
                    },
                    success: function(res){
                        if(res != "0"){
                            msg = "登录用户名已存在，请修改！";
                        }
                    },
                    error:function(){
                        msg = "验证登录名出错！";
                    }
                });
                return msg;
            }
        });

        $("[name='deptName']").on("click",function (e) {
            e.stopPropagation();
            if(!el5) {
                el5 = eleTree.render({
                    elem: '.deptName',
                    url: ctx + "system/dept/treeData2",
                    request: {
                        name: "name",
                        key: "id",
                        children: "children",
                        checked: "checked",
                        disabled: "disabled",
                        isLeaf: "isLeaf"
                    },
                    response: {
                        statusName: "code",
                        statusCode: 0,
                        dataName: "data"
                    },
                    defaultExpandAll: true,
                    expandOnClickNode: false,
                    highlightCurrent: true
                });
                $(".eleTree").css("position","absolute");
            }
            $(".deptName").toggle();
        });

        eleTree.on("nodeClick(deptNameTree)",function(d) {
            $("[name='deptName']").val(d.data.currentData.name);
            $("[name='deptId']").val(d.data.currentData.id);
            $(".deptName").hide();
        })

        var index = parent.layer.getFrameIndex(window.name);

        form.render(null, 'form-user');
        form.on('submit(btn-add)', function(data){
            var roleIds = common.getCheckValues("role");
            var postIds = common.getCheckValues("post");
            data.field.roleIds = roleIds;
            data.field.postIds = postIds;
            data.field.status = data.field.status === "on" ? "1":"0";

            console.log(JSON.stringify(data.field));

            //TODO:提供一个检测表单数据检测性通用方法
            if(true){
                $.ajax({
                    cache : false,
                    type : "POST",
                    url : ctx + "system/user/add",
                    data : data.field,
                    async : false,
                    error : function(request) {
                        layui.msg("系统错误");
                    },
                    success : function(data) {
                        console.log("success:",data);
                        if(data.code > 0 ){
                            layui.msg(data.msg);
                        }else{
                            parent.layer.close(index);
                        }
                    }
                });
            }
            return false;
        });
    });
</script>
</body>
</html>
